<template>
  <div>
    <!--    返回导航栏-->
    <van-nav-bar
      title="菜品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <img v-for="img in imageList" v-lazy="img" style="width: 100%"/>
    <div class="bar">
      <div style="font-size: .5rem;margin-bottom: .1rem">{{ dish.name }}
        <van-stepper v-model="totalNum" style="float:right;" @change="totalPrice=dish.price*totalNum"/>
      </div>
      <div style="font-size: .3rem">{{ dish.description }}</div>
      <div style="text-align: right;font-size: .5rem;color: red">¥{{ dish.price / 100 }}</div>
    </div>
    <van-submit-bar :price="totalPrice" button-text="确认购买" @submit="onSubmit"/>
    <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
      <van-submit-bar :price="totalPrice" button-text="立即支付" @submit="onSubmitOrder"/>

    </van-popup>
  </div>
</template>

<script>
export default {
  name: "dish",
  data() {
    return {
      imageList: [
        "https://t7.baidu.com/it/u=760837404,2640971403&fm=193&f=GIF"
      ],
      dish: {
        categoryId: 0,
        image: '',
        price: 0,
        storeId: '',
        description: '',
      },
      totalNum: 1,
      totalPrice: 0,
      show: false,
      tel:'13000000000',
      name:'张三',
      orderId:''
    }
  },
  created() {
    console.log(this.$route.params.id)
    this.$axios.get("/dish/findDishById/" + this.$route.params.id).then(resp => {
      console.log(resp)
      this.dish = resp.data
      this.totalPrice = this.dish.price
    })
  },

  methods: {
    onSubmit() {

      this.show = true
    },
    onClickLeft() {
      this.$router.back()
    },
    onEdit(){
      this.$toast.success('编辑地址')
    },
    onAdd(){

    }

  }
}
</script>

<style scoped>
.bar {
  width: 100%;
  background-color: whitesmoke;
}
</style>
